<template>
	<view class="home">
		<view class="home-search">
			<u-search
				:placeholder="`输入产品名称`" 
				bgColor="#fff"
				:borderColor="borderColor"
				height="70rpx"
				:showAction="false"
				:inputStyle="{fontSize: '28rpx'}"
				v-model="keyword"
				@change="onChange"></u-search>
		</view>
		
		<view v-if="swiperList.length" class="home-swiper">
			<u-swiper 
				previousMargin="30"
				nextMargin="30"
				circular
				keyName="image"
				:list="swiperList" 
				radius="8" 
				height="350rpx" 
				bgColor="#fff"
				@click="clickSwiper"></u-swiper>
		</view>
		
		<u-gap height="30rpx" bgColor="#f8f8f8"></u-gap>
		
		<view class="home-list">
			<view class="title">产品列表</view>
			<goodsItem :list="list" />
			
			<empty :show="nodata" />
		</view>
		
		<view v-if="list.length" style="padding: 0 0 30rpx;">
			<u-loadmore :status="loadstatus" />
		</view>
		
		<!-- <view
			class="fixedShare flex flex-direction align-center justify-center" 
			@click="showShare = true">
			<u-icon name="share" color="#fff" size="14"></u-icon>
			<view>分享</view>
		</view> -->
		
		<sharePopup :show="showShare" @close="showShare = false" />
	</view>
</template>

<script>
	import { getGoodsList, getIndexBlock } from '@/api/common'
	
	export default {
		data() {
			return {
				showShare: false,
				skeletonLoading: true,
				swiperList: [],
				borderColor: this.defaultColor,
				keyword: '',
				loadstatus: 'loading',
				page: 1,
				pageSize: 10,
				nodata: false,
				list: [],
			}
		},
		onReady() {
			// uni.$on(this.constants.EVENT_LOGIN_KEY, () => {
			// 	this.getStorage()
			// })
		},
		onShareAppMessage(res) {
			let path = '/pages/index/index'
			
			return {
				path,
				imageUrl: this.swiperList[0].image
			}
		},
		onLoad(options) {
			if (options.path) {
				uni.navigateTo({
					url: JSON.parse(decodeURIComponent(options.path))
				})
			}
			
			const set = uni.getStorageSync(this.constants.STORAGE_SETTING_KEY)
			if (set.name) {
				uni.setNavigationBarTitle({
					title: set.name
				})
			}
			
			this.init()
		},
		onReachBottom() {
			if (this.loadstatus == 'nomore') return
			this.getList()
		},
		onPullDownRefresh() {
			this.init()
		},
		methods: {
			init() {
				this.getBlocks()
				this.getList(true)
			},
			getBlocks() {
				getIndexBlock().then(res => {
					this.swiperList = res
				})
			},
			getList(isOnce) {
				this.loadstatus = 'loading'
				if (isOnce) {
					this.page = 1
					this.nodata = false
					
					uni.showLoading({
						title: '数据加载中...',
					})
				}
				getGoodsList({
					page: this.page,
					pageNum: this.pageSize,
					keyword: this.keyword
				}).then(res => {
					if (isOnce) {
						this.list = []
					}
					
					let list = res.data.length ? res.data : []
					this.list = [...this.list, ...list]
					this.loadstatus = list.length === res.total ? 'nomore' : 'loading'
					
					this.page++
					this.nodata = res.total === 0
				}).finally(() => {
					this.skeletonLoading = false
					uni.stopPullDownRefresh()
				})
			},
			
			onChange() {
				uni.$u.debounce(this.getList(true), 500)
			},
			
			clickSwiper(index) {
				return
				const item = this.swiperList[index]
				if (item.url) {
					let obj = {
						url: item.url,
						title: item.title
					}
					this.$common.openUrl(`/packages/webview/webview?obj=${encodeURIComponent(JSON.stringify(obj))}`)
				}
			},
			
			openPage(url) {
				if (!url) return
				this.$common.openUrl(url)
			}
		}
	}
</script>

<style lang="scss" scoped>
.home {
	&-search {
		padding: 30rpx;
	}
	&-swiper {
		padding-bottom: 30rpx;
	}
	&-list {
		.title {
			font-size: 30rpx;
			font-weight: 700;
			padding: 30rpx;
		}
	}
}
</style>
